import React, { useEffect, useState } from 'react';
import {Button,Table,Switch,notification} from 'antd'
import {PlusOutlined} from '@ant-design/icons'
import type { ColumnsType } from 'antd/es/table';
import service from '../../../api'
import "./Swiper.scss"
import _ from 'lodash'//lodash是一个常用工具函数集合库
import { useNavigate } from 'react-router-dom';

interface Props {}

function Swiper(props:Props) {
    
    var navigate = useNavigate() 

    var [bannerlist , setBannerlist] = useState([])
    var [loading , setLoading] = useState(false)

    //请求轮播图列表
    var request_banner_list = async ()=>{
        setLoading(true);
        var res = await service.banner.banner_list();
        setLoading(false);
        
        setBannerlist(res.data.data)
    }
    useEffect(()=>{
        request_banner_list()
    },[])

    interface DataType {
        key: string;
        alt: string;
        bannerid: string;
        flag: boolean;
        link: string;
        img: string;
    }

    //切换展示状态
    var handleChange = async (checked:any,bannerid:any)=>{
        var res = await service.banner.banner_updateFlag({ bannerid,flag:checked });
        if( res.data.code == 200 ){
            notification.success({message:'更新flag成功!'})
        }
    }
    //删除图片
    var handleDelete = async (bannerid:any)=>{
        //删除远程图片
        var res = await service.banner.banner_delete({ bannerid });
        if( res.data.code == 200 ){
            notification.success({message:'删除图片成功!'});
            //删除本地图片
            var index = bannerlist.findIndex((item:any)=>item.bannerid == bannerid)
            if( index != -1 ){
                //对本地数据深拷贝( 否则组件不会更新 )
                //var newbannerlist = JSON.parse( JSON.stringify( bannerlist ) )
                var newbannerlist = _.cloneDeep(bannerlist);
                newbannerlist.splice(index,1);
                setBannerlist( newbannerlist );
            }
        }
    }

    //跳转到添加轮播图页面
    var toSwiperAdd = ()=>{
        navigate('/index/swiperadd');
    }

    //表格列的配置项
    const columns: ColumnsType<DataType> = [
        {
          title: '序号',
          key: 'name',
          render: (_,record,index) => <div>{index+1}</div>,
        },
        {
          title: '图片',
          key: 'name',
          width: 200,
          render: (_,record,index) => <img src={record.img}/>,
        },
        {
          title: '图片',
          key: 'name',
        //   render: (_,record,index) => <a href={record.address}> 链接 </a>,
          render: (_,record,index) => <Button type='link' href={record.link}> 链接 </Button>,
        },
        {
          title: '提示',
          key: 'name',
          dataIndex:'alt'
        },
        {
          title: '是否展示',
          key: 'name',
          render: (_,record,index) => <Switch checked={record.flag} onChange={(checked)=>{ handleChange(checked,record.bannerid) }} />,
        },
        {
          title: '操作',
          key: 'name',
          render: (_,record,index) => <Button danger type="primary" onClick={()=>{ handleDelete(record.bannerid) }}> Delete </Button>,
        },
    ];

    return (
        <div className='swiper'>
             <Button onClick={toSwiperAdd} type="primary">添加轮播图 <PlusOutlined /> </Button>
             <Table loading={loading} className='table' style={{marginTop:20}} columns={columns} dataSource={bannerlist} />
        </div>
    );
}

export default Swiper;